<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <!-- <meta http-equiv="Pragma" content="no-cache"> -->
    <title>班级空间相册</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <!-- 样式初始化 自定义文件 -->
    <link rel="stylesheet" href="../css/index.css">
    <!-- 下面所有都是库文件 -->
    <link rel="stylesheet" href="../newtp/lib/weui.min.css">
    <link rel="stylesheet" href="../newtp/css/jquery-weui.css">
    <link rel="stylesheet" href="../newtp/css/theme.css">
    <script src="../newtp/lib/jquery-2.1.4.js"></script>
    <script src="../newtp/lib/fastclick.js"></script>
    <script src="../newtp/js/jquery-weui.js"></script>
<style>
/*最外层*/
.page-container{height: 100%;width: 100%;  overflow: hidden; }
/*顶部*/
.page-top{ height: 50px; top:0; background:#fff; }
.g-back{ float: left; width: 80px;  height: 50px;background: url(../img/g_03.png) center no-repeat; background-size: 18px; }
.g-other{float: right;width: 80px; height: 50px;}
.t-title{ display:block; line-height: 50px; width: 100%;  text-align: center; }
/*内容容器*/
/*内容*/
.page-wrap{ height: 100%; width: 100%; background:#f8f8f8;overflow-y: auto; }
.p-head{position: relative; height: 145px; background:#00c01b; overflow: hidden;  }
.p-head .bg-img{position: absolute; top:0; left: 0; width: 100%;  }
.p-head .img-outer{ position: absolute; top:0; left: 0; width: 100%; height: 100%; }
.p-head p{ color:#fff; margin-left: 100px; text-align: left; }
.p-head-top{ height: 100px; display: table-cell; vertical-align: middle; }
.p-head .r-img{position: absolute;left: 18px; top: 14px; width: 76px;height: 76px;border-radius:50%;}
.p-head .name{width:100%;line-height: 25px; font-size:15px;}
.p-head .liang{width:100%;line-height: 25px; font-size:10px;}
.h-reload{position: absolute; right: 15px;top:15px; width: 16px;height: 14px;background: url(../img/re_03.png) center no-repeat;background-size: 16px; }
.h-set{ position: absolute; right: 15px;top:40px; width: 16px;height: 16px;background: url(../img/set_03.png) center no-repeat;background-size: 16px; }
.p-head-botm{padding:0 18px; width: 100%; height: 45px;border-radius:12px 12px 0 0; background: #fff;}
.p-head-botm span{float: left;height: 45px;line-height: 45px; width:50%;font-size: 15px; }
.p-head-botm a{float: right;padding-left:40px;margin-top:9px;height: 28px;line-height: 28px; width:105px;border-radius: 3px; 
  font-size: 13px;background: #3095fd url(../img/zx_03.jpg) 13px center no-repeat;background-size: 22px 16px;color: #fff;}
/*相册*/
#cont-wrap{ background: #fff; }
.cont-picture{margin: 10px 0; padding:0 2px; overflow: hidden; }
.cont-picture li{position: relative; float: left; overflow: hidden; padding:2px; max-width: 200px; min-height: 100px;}
.cont-picture li div{min-width: 100px;min-height: 100px; border:1px solid #f2f2f2; border-radius: 3px;  }
.cont-picture li a{ position:absolute; top:5px; right:5px; height: 20px;width:20px;border-radius: 50%;
  line-height: 20px;text-align: center;font-size: 20px;color: #fff;background:rgba(0,0,0,0.2); }
/*模态框*/
.mo{ position:absolute;left: 0;top: 0;width: 100%;height: 100%;z-index: 999;background:#000;overflow-y: auto;}  
.mo .cont-body{position: absolute; width: 100%; left:50%; top:50%; transform: translate(-50%, -50%);}
.mo img{ width: 100%;/*border-top:2px solid #ccc;border-bottom:2px solid #ccc;*/}  
.mo a{ display: block;width: 43px;height: 43px;margin: 15px auto;border-radius: 50%; border:5px solid rgba(255,255,255,0.4);
   background: rgba(0,0,0,0.5); line-height:28px; text-align: center;font-size: 35px;color: #fff;
}  
</style>
</head>
<body>
<div class="page-container">
      <div class="weui-tab">
             <!-- 头部 -->
              <div class="weui-navbar page-top">
                      <a  href="javascript:history.back(-1);" class="g-back"></a>                   
                      <span class="t-title">班级空间相册</span>  
                      <a  class="g-other"></a>
              </div>
              <!-- 内容区 -->
              <div class="weui-tab__bd page-wrap" >
                      <div class="p-head">
                              <img src="../img/bg/bjb_02.jpg"  class="bg-img">
                              <div class="img-outer">
                                    <div class="p-head-top">
                                           <img class="r-img" src="../img/bg/bj_02.png" />
                                          <p class="name">赵丽丽 老师</p>
                                          <p class="liang">今日访问量:<span>20</span> 总浏览量:<span>150000</span></p>                                     
                                    </div>
                                    <a href="###" class="h-reload"></a>
                                    <a href="banjikongjianset.html" class="h-set"></a>
                                    <div class="p-head-botm">
                                          <span>班级名称</span>
                                          <input type="file" id="file" style="display: none;" multiple="multiple">
                                          <a href="###" onclick="file.click()">上传照片</a>
                                    </div>
                             </div>
                      </div>
          
                     <div id="cont-wrap" >
                        <ul class="cont-picture" id="cont-picture">
                          <li>
                            <div style="background:url(../img/t5.png) no-repeat;background-size: cover;" 
                            dtr="../img/t5.png" onclick="imgShow(this)"></div>
                            <a class="img-close" onclick="imgClose(this)">&times;</a></li>
                          <!-- <li><img src="" ><a class="img-close">&times;</a></li>
                          <li><img src="" ><a class="img-close">&times;</a></li>
                          <li><img src="" ><a class="img-close">&times;</a></li>
                          <li><img src="" ><a class="img-close">&times;</a></li>
                          <li><img src="" ><a class="img-close">&times;</a></li>
                          <li><img src="" ><a class="img-close">&times;</a></li> -->
                        </ul>
                     </div>
             </div>
     </div>
<!-- 模态框 -->
    <div class="mo" style="display: none;">
         <div  class="cont-body">
               <img src="../img/t1.png">
  <!--              <div>
                  <a class="mo-close">&times;</a>
               </div>  -->        
         </div>
    </div>

</div>
</body>
<script>
 // 设置相册高度等于宽度
(function(doc, win) {
    var dhtml = doc.documentElement;
    var  resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
    var  recalc = function() {
            var width = ($("#cont-picture").width() - 4 )*0.3333;
            $("#cont-picture").find("div").width( width-4 ).height( width-4 );
        };
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);


// 图片上传
$("#file").on("change",function(){
    var fileName = this.value;   
    if (!fileName.match(/.jpg|.gif|.png|.bmp/i)) {   
        alert('您上传的图片格式不正确，请重新选择！');   
        return false;   
    }   

    for(var i=0; i<this.files.length; i++){
          var file = this.files[i];
          if (!!file) {                 
                var myURL = window.URL || window.webkitURL;
                var url=myURL.createObjectURL(file);                   
                var li = $(
                '<li>'+
                  '<div style="background:url('+url+') no-repeat;background-size: cover;" dtr='+url+' onclick="imgShow(this)"></div>'+
                  '<a class="img-close" onclick="imgClose(this)">&times;</a></li>'
                );                   
                var width = ($("#cont-picture").width() - 4 )*0.3333;
                li.find("div").width( width-4 ).height( width-4 );
                $("#cont-picture").prepend(li);
          }
    } 
})

// 查看图片
function imgShow(t){
   $(".mo").find("img")[0].src=$(t).attr("dtr");
   $(".mo").show();
}
// 模态框关闭
$(".mo").click(function(){
    $(".mo").hide();
})

// 图片删除按钮
function imgClose(t){
  $(t).parent().remove();
}

</script>
</html>